AJAX 是 Asynchronous JavaScript and XML(非同步的 JavaScript 與 XML 技術)的縮寫，簡單說就是網頁不用重新整理，就能即時地透過瀏覽器去跟伺服器溝通，撈出資料。

HTTP 定義了一組能令給定資源，執行特定操作的請求方法(request methods)儘管屬於名詞，但也能稱為 HTTP 動詞。

今天要來介紹實戰中很常使用的請求套件 axios，他跟 AJAX 一樣都是屬於非同步的技術方法，同時簡化了網路請求的過程，支援請求攔截、回應攔截、取消請求、自動轉換 JSON 資料等功能。

API

API 是 Application Programming Interface 應用程式介面的縮寫，就像應用程式之間的橋樑，讓它們共享和使用彼此的功能。

先來看一下網路圖像說明，再來細說會更明白！

An explanation of web development in photo collage

圖片來源：Vivek Naskar

API 運作
API 透過傳送和接收請求來運作，流程大致上如下：

1. 用戶端應用程式(例如行動應用程式或網站)向 API 伺服器發送請求。
2. API 伺服器處理請求並回傳回應。
3. 回應可以是資料、使用者的個人資料資訊或不同產品的物件陣列之類的東西。

RESTful API
API 的類型很多最常見的是 RESTful API，HTTP 方法主要有以下幾種，其實不外乎是 CRUD (creat、read、 update、delete)

API 測試工具 - Postman
Postman 是 Google Chrome 中的一個插件，可用於測試 API 服務，它是一個強大的 HTTP 用戶端，用於檢查 Web 服務，對於手動或探索性測試，Postman 是測試 API 的好選擇。

使用 Axios 進行網路請求

Axios 是一個基於 Promise 的 HTTP 客戶端，用於發送 HTTP 請求簡化了與伺服器進行網路請求的過程，支援各種請求方法(GET、POST、PUT、PATCH、DELETE)並自動將回應資料解析為 JSON 格式。

安裝套件

npm install axios

使用方法

• GET 的請求方法：

  import axios from 'axios';
  
  axios.get('https://https://randomuser.me/api/')
    .then(response => {
      console.log(response.data); // 直接獲取資料
    })
    .catch(error => {
      console.error('錯誤訊息!', error);
    });
  

• POST 的請求方法：

  import axios from 'axios';
  
  axios.post('https://jsonplaceholder.typicode.com/todos', data)
    .then(response => {
      console.log(response.data); // 直接獲取資料
    })
    .catch(error => {             // 使用 .catch() 處理錯誤
      console.error('錯誤訊息!', error);
    });
  

處理回傳的 JSON 資料

第 5 天：物件與陣列有提到一部份的 JSON ，所以就可以知道跟物件多少有些關係！

什麼是 JSON？
JSON(JavaScript Object Notation，JavaScript 物件表示法)是 API 經常使用的資料交換格式，是一種用在儲存和傳輸資料的輕量級格式。

處理回傳資料
Axios 自動將回應數據解析為 JSON 格式，無需額外的 .json() 方法，因此可以直接存取 response.data 以取得數據。

axios.get("https://randomuser.me/api").then((response) => {
  const data = response.data;
  console.log(data);
});

中斷呼叫

文件：取消请求
參考文章：可以中断的异步操作

有時後需要中斷一個正在進行的網路請求，例如使用者可能點選時間送出新的請求，這時候舊的請求還沒回來，就很適合取消請求避免重複呼叫。

CancelToken
Axios 的 CancelToken 支援取消請求，透過取消 token 的機制中斷請求。

import axios from 'axios';

const source = axios.CancelToken.source();

axios.get('https://randomuser.me/api/', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('取消請求', error.message);
    } else {
      console.error('錯誤訊息', error);
    }
  });

source.cancel('使用者中斷請求');

AbortController
AbortController 是一個用於中斷網路請求的原生 JavaScript API，通常與 fetch 一起使用。

// 建立 AbortController 實例
const controller = new AbortController();
const signal = controller.signal;

// 呼叫 api 並且把 signal 傳遞給 fetch
fetch('https://api.example.com/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error('出現異常');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('中斷請求');
    } else {
      console.error('請求錯誤訊息:', error);
    }
  });

// 取消請求
setTimeout(() => {
  controller.abort();
  console.log('使用者中斷請求');
}, 2000);

CORS -> 口試常出現的問題：你可以大概說一下什麼是 CORS 嗎？

CORS 代表跨來源資源共享，有點像網路瀏覽器的國際出入境規則，如果要拜訪的網站是日本，從台灣到日本時，通常需要確認過護照、外國人入境卡與申告書才能入境，這是為了確保安全並規範進出人員，CORS 就像那些旅行規則一樣。

重要性

• 保護網路使用者免受惡意內容的侵害。
• 防止網站在未經適當許可的情況下自由存取其他網站的資源。

網路狀態碼

圖片來源：HTTP Status Codes | Ayush Soni

前端主要專注在 200、404 以及 500，但是學後端之後發現，這些狀態碼用於指示請求的處理結果，對於後端的測試很重要，多少還是要知道些！

// 正確的 api 路徑 'https://randomuser.me/api'，這裡刻意打錯測試
axios
  .get("https://randomuser.me/ap")
  .then((response) => {
    console.log("Status Code:", response.status);
    console.log(response.data);
  })
  .catch((error) => {
    if (error.response) {
      console.error("Error Status:", error.response.status);   // "Error Status:" 404
      console.error("Error Data:", error.response.data);       // "Error Data:" "Not Found"
    } else if (error.request) {
      console.error("Error Request:", error.request);
    } else {
      console.error("Error Message:", error.message);
    }
  });